<!--时间轴-->

<template>
  <div class="w-h-full">
    <!--组件遮罩层，用于在设计器中显示-->
    <div v-if="shade" class="shade"></div>

    <div v-resize="resizeHandle" style="width: 100%; height: 100%;">
      <div :id="'chart-'+component.id+'-'+chartDomNum" class="w-h-full"></div>
    </div>
  </div>
</template>

<script>

  import FuncCompMixin from '@/mixin/FuncCompMixin'
  import ChartCompMixin from '@/mixin/ChartCompMixin'
  import PnDesigner from '@/utils/PnDesigner'

  const _this = {
    name: 'TimelineComp', // 此名称必须填写，且必须与组件文件名相同
    mixins: [FuncCompMixin, ChartCompMixin],
    attr: {
      version: '2.0',
      configDataTemp: Object.assign({

        // 组件相关配置属性，Echarts图表组件的相关配置属性，必须在chartOption对象下定义
        chartOption: {
          axisType: 'category',
          currentIndex: 0,
          autoPlay: false,
          rewind: false, // 反向播放
          loop: true, // 循环播放
          playInterval: 3000, // 播放速度
          controlPosition: 'left', // 播放按钮位置
          left: 20,
          right: 20,
          padding: 5,
          orient: 'horizontal',
          inverse: false,
          symbol: 'circle',
          symbolSize: 10,
          symbolRotate: 0,
          symbolOffset: [0, 0],

          itemStyle: {
            color: '#2196f3',
            borderColor: '#90caf9',
            borderWidth: 1,
            borderType: 'solid',
            shadowBlur: 0,
            shadowColor: '',
            opacity: 1
          },
          checkpointStyle: {
            symbol: 'circle',
            symbolSize: 12,
            color: '#ff9800',
            borderWidth: 2,
            borderColor: '#ffcc80',
          },
          lineStyle: {
            show: true,
            color: '#e0e0e0',
            width: 2,
            type: 'solid',
            shadowBlur: 0,
            shadowColor: '',
            opacity: 1
          },
          label: {
            show: true,
            rotate: 0,
            position: 'auto',
            top: {
              fontSize: 12,
              color: '#eeeeee',
              lineHeight: 60
            },
            bottom: {
              fontSize: 12,
              color: '#eeeeee',
              lineHeight: 20
            }
          },
          controlStyle: {
            show: true,
            showPlayBtn: true,
            showPrevBtn: true,
            showNextBtn: true,
            itemSize: 18,
            itemGap: 12, // 『控制按钮』的间隔，单位为像素（px）
            playIcon: '',
            stopIcon: '',
            prevIcon: '',
            nextIcon: '',
            color: '#f5f5f5',
            borderColor: '#9e9e9e',
            borderWidth: 0
          },
          emphasis: {
            itemStyle: {
              color: '#ff9800',
              borderColor: '#ffcc80',
              borderWidth: 2,
              borderType: 'solid',
              shadowBlur: 0,
              shadowColor: '',
            }
          }
        },

        timelineChangeJsCode: ''

      }, PnDesigner.buildFuncCompDatasourceField({ // 如果组件需要配置数据源，则需要调用此函数构建数据源字段对象
        ds_resultObjTemplate: [
          {
            field: 'name',
            remark: '名称'
          },
          {
            field: 'value',
            remark: '值'
          }
        ],
        ds_resultObj: [
          {
            name: '事件1',
            value: 2016
          },
          {
            name: '事件2',
            value: 2017
          },
          {
            name: '事件3',
            value: 2018
          },
          {
            name: '事件4',
            value: 2019
          }
        ],
        ds_useFilter: true, // 是否使用过滤器，默认不使用
        ds_useTimer: false, // 是否开启定时器配置，默认不开启
      }), PnDesigner.buildFuncCompGlobalField(), PnDesigner.buildEchartCompCustomOption(), PnDesigner.buildFuncCompInteractionConfiguration([
        PnDesigner.buildFuncCompInteractionStreamItem('itemChange', [
          PnDesigner.buildFuncCompInteractionFieldsMapItem('name','', ''),
          PnDesigner.buildFuncCompInteractionFieldsMapItem('value','', ''),
        ])
      ]))
    },
    data() {
      return {
        value: ''
      }
    },
    mounted() {
      this.init();

      this.value = this.component.compConfigData.ds_resultObj[this.component.compConfigData.chartOption.currentIndex]
    },
    methods: {
      init () { // 组价初始化函数，函数名必须使用init，不可更改
        this.initDatasource(() => {
          this.chart.setOption(this.chartOption);
          this.runCustomGlobalJsCode();
          this.runTimelineChangeJsCode()
        }, (result) => {
          this.chart.setOption(this.chartOption);
          this.runCustomGlobalJsCode();
          this.runTimelineChangeJsCode()
        });
      },

      runTimelineChangeJsCode () {
        let _this = this;
        this.chart.off('timelinechanged');
        this.chart.on('timelinechanged', (params) => {
          this.value = this.component.compConfigData.ds_resultObj[params.currentIndex];
          let value = this.value;
          this.$PnDesigner.launchInteractionStream(this.component.compConfigData, 'itemChange', this.value)
          eval(this.component.compConfigData.timelineChangeJsCode)
        })
      }
    },
    computed: {
      chartOption () {

        let option = {
          timeline: {
            show: true,
            axisType: this.component.compConfigData.chartOption.axisType,
            currentIndex: this.component.compConfigData.chartOption.currentIndex,
            autoPlay: this.$store.state.release.pageMetadata ? this.component.compConfigData.chartOption.autoPlay : false,
            rewind: this.component.compConfigData.chartOption.rewind, // 反向播放
            loop: this.component.compConfigData.chartOption.loop, // 循环播放
            playInterval: this.component.compConfigData.chartOption.playInterval, // 播放速度
            controlPosition: this.component.compConfigData.chartOption.controlPosition, // 播放按钮位置
            left: this.component.compConfigData.chartOption.left,
            top: this.component.compConfigData.chartOption.orient == 'horizontal' ? 'center': 0,
            right: this.component.compConfigData.chartOption.right,
            padding: this.component.compConfigData.chartOption.padding,
            orient: this.component.compConfigData.chartOption.orient,
            inverse: this.component.compConfigData.chartOption.inverse,
            symbol: this.component.compConfigData.chartOption.symbol,
            symbolSize: this.component.compConfigData.chartOption.symbolSize,
            symbolRotate: this.component.compConfigData.chartOption.symbolRotate,
            symbolOffset: this.component.compConfigData.chartOption.symbolOffset,

            itemStyle: {
              color: this.component.compConfigData.chartOption.itemStyle.color,
              borderColor: this.component.compConfigData.chartOption.itemStyle.borderColor,
              borderWidth: this.component.compConfigData.chartOption.itemStyle.borderWidth,
              borderType: this.component.compConfigData.chartOption.itemStyle.borderType,
              shadowBlur: this.component.compConfigData.chartOption.itemStyle.shadowBlur,
              shadowColor: this.component.compConfigData.chartOption.itemStyle.shadowColor,
              opacity: this.component.compConfigData.chartOption.itemStyle.opacity
            },
            checkpointStyle: {
              symbol: this.component.compConfigData.chartOption.checkpointStyle.symbol,
              symbolSize: this.component.compConfigData.chartOption.checkpointStyle.symbolSize,
              color: this.component.compConfigData.chartOption.checkpointStyle.color,
              borderWidth: this.component.compConfigData.chartOption.checkpointStyle.borderWidth,
              borderColor: this.component.compConfigData.chartOption.checkpointStyle.borderColor,
            },
            lineStyle: {
              show: this.component.compConfigData.chartOption.lineStyle.show,
              color: this.component.compConfigData.chartOption.lineStyle.color,
              width: this.component.compConfigData.chartOption.lineStyle.width,
              type: this.component.compConfigData.chartOption.lineStyle.type,
              shadowBlur: this.component.compConfigData.chartOption.lineStyle.shadowBlur,
              shadowColor: this.component.compConfigData.chartOption.lineStyle.shadowColor,
              opacity: this.component.compConfigData.chartOption.lineStyle.opacity
            },

            label: {
              show: this.component.compConfigData.chartOption.label.show,
              position: this.component.compConfigData.chartOption.label.position,
              rotate: this.component.compConfigData.chartOption.label.rotate,
              formatter: (value, index) => {
                let name = this.component.compConfigData.ds_resultObj[index].name;
                if (name) {
                  return [
                    name ? '{name|'+name+'}' : '',
                    '{value|'+value+'}'
                  ].join('\n')
                }else {
                  return [
                    '{value|'+value+'}'
                  ].join('\n')
                }
              },
              rich: {
                name: {
                  color: this.component.compConfigData.chartOption.label.top.color,
                  fontSize: this.component.compConfigData.chartOption.label.top.fontSize,
                  lineHeight: this.component.compConfigData.chartOption.label.top.lineHeight
                },
                value: {
                  color: this.component.compConfigData.chartOption.label.bottom.color,
                  fontSize: this.component.compConfigData.chartOption.label.bottom.fontSize,
                  lineHeight: this.component.compConfigData.chartOption.label.bottom.lineHeight,
                }
              }
            },

            controlStyle: {
              show: this.component.compConfigData.chartOption.controlStyle.show,
              showPlayBtn: this.component.compConfigData.chartOption.controlStyle.showPlayBtn,
              showPrevBtn: this.component.compConfigData.chartOption.controlStyle.showPrevBtn,
              showNextBtn: this.component.compConfigData.chartOption.controlStyle.showNextBtn,
              itemSize: this.component.compConfigData.chartOption.controlStyle.itemSize,
              itemGap: this.component.compConfigData.chartOption.controlStyle.itemGap, // 『控制按钮』的间隔，单位为像素（px）
              // playIcon: '',
              // stopIcon: '',
              // prevIcon: '',
              // nextIcon: '',
              color: this.component.compConfigData.chartOption.controlStyle.color,
              borderColor: this.component.compConfigData.chartOption.controlStyle.borderColor,
              borderWidth: this.component.compConfigData.chartOption.controlStyle.borderWidth
            },

            emphasis: {
              itemStyle: {
                color: this.component.compConfigData.chartOption.emphasis.itemStyle.color,
                borderColor: this.component.compConfigData.chartOption.emphasis.itemStyle.borderColor,
                borderWidth: this.component.compConfigData.chartOption.emphasis.itemStyle.borderWidth,
                borderType: this.component.compConfigData.chartOption.emphasis.itemStyle.borderType,
                shadowBlur: this.component.compConfigData.chartOption.emphasis.itemStyle.shadowBlur,
                shadowColor: this.component.compConfigData.chartOption.emphasis.itemStyle.shadowColor
              }
            },

            data: []
          }
        };

        if (this.component.compConfigData.chartOption.orient == 'vertical') {
          option.timeline.bottom = 0
        }

        option.timeline.data = this.runCustomFilter(this.component.compConfigData.ds_resultObj);

        return option;
      }
    }
  };

  export default _this
</script>

<style scoped>

</style>
